@import '@/assets/styles/sassvars.scss';

.panel-container {
  display: flex;
  --form-background-color: var(--background-base);
  padding: 0 var(--p-2);
  max-width: min(1080px, 100vw);

  .form-item:not(:last-child) {
    margin-bottom: var(--m-1);
  }

  .left {
    flex-basis: 55%;

    :deep(.right > .online) {
      margin-left: auto;
      font-size: 0.8em;
    }
  }

  .right {
    flex-basis: 45%;
    margin-left: auto;

    .chat-container {
      :deep(.chat-container--inner) {
        padding: 0;
      }

      :deep(form.form) {
        padding: 0;
        --form-background-color: var(--background-base);
      }
    }
  }

  .left, .right {
    min-width: 0;
    padding: 0 var(--p-1);

    > div {
      padding: var(--p-4) var(--p-1);
      display: flex;
      flex-direction: column;

      &:not(:last-child) {
        border-bottom: 1px solid var(--background-highlight);
      }

      &.buttons .button:not(:last-child),
      &.buttons .danger-button:not(:last-child) {
        margin-right: .5em;
        margin-bottom: .5em;
      }

      &.buttons .buttons--inner .danger-button {
        display: inline-flex;
      }

      > span {
        color: var(--text-subdued);

        &:not(:last-child) {
          margin-bottom: var(--m-2);
        }
      }
    }

    .urlbuttons {
      margin-top: var(--m-2);
    }

    .keyselection {
      margin-bottom: var(--m-1);
    }

    .inline {
      display: flex;
      flex-direction: row;
      gap: var(--m-1);

      .column {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: 0;
        gap: var(--m-1);

        .form-item, .select {
          flex-grow: 1;
        }

        &.extend {
          flex-grow: 2;

          > * {
            flex-grow: 1;
          }
        }

        &.collapse {
          flex-grow: 0;
        }

        &.justify-right {
          justify-content: flex-end;
        }
      }

      @media screen and (max-width: $maxWidthTablet) {
        &:not(.copy) {
          flex-direction: column;
        }

        .column {
          display: flex;
          > * {
            flex-grow: 1;

            &:not(.select) {
              text-align: center;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: $maxWidthTablet) {
    display: block;
  }
}